<!-- serie-details.html -->
<div class="serie-overview" style="color:black">
    <button type="button" class="close" ng-click="sidepanel.closeSidePanelExpansion()" uib-tooltip="{{'COMMON/close/btn'|translate}} {{'COMMON/series-details/lbl'|translate}}" tooltip-placement="left">&times;</button>
    <div class="serie-img poster large" lazy-background="{{::sidepanel.serie.poster}}" uib-tooltip="{{::sidepanel.serie.name}}" tooltip-append-to-body="true" tooltip-placement="left">
      <em ng-show="sidepanel.serie.watched" class="badge" tooltip-placement="bottom" tooltip-append-to-body="true" uib-tooltip="{{'COMMON/all-watched/tooltip'|translate}}">
        <i class="glyphicon glyphicon-eye-open" style="color:white !important"></i>
      </em>
      <em ng-show="!sidepanel.serie.watched" class="badge" tooltip-placement="bottom" tooltip-append-to-body="true" uib-tooltip="{{::sidepanel.serie.notWatchedCount}} {{'COMMON/to-watch/tooltip'|translate}}">
        <i class="glyphicon glyphicon-eye-close" ></i> {{::sidepanel.serie.notWatchedCount}}
      </em>
      <em ng-show="!sidepanel.serie.displaycalendar" class="badge leftbadge"  tooltip-placement="bottom" tooltip-append-to-body="true" uib-tooltip="{{'COMMON/series-hidden/tooltip'|translate}}">
        <i class="glyphicon glyphicon-ban-circle" style="color:white !important"></i>
      </em>
    </div>
    <table class="metadata" width="100%" border="0" style="margin-top: 10px">
      <tbody>
        <tr ng-show="sidepanel.serie.alias.length > 0">
          <th translate-once>COMMON/alias/hdr</th>
          <td>{{::sidepanel.serie.alias}}</td>
        </tr>
        <tr>
          <th translate-once>SIDEPANEL/SERIE-DETAILS/links/hdr</th>
          <td>
            <a style="text-decoration: underline" ng-href="https://www.google.com/search?q={{::sidepanel.serie.name}} (TV series)+Wikipedia&btnI=745" target="_blank">Wikipedia</a><strong> | </strong>
            <a style="text-decoration: underline" ng-href="https://www.imdb.com/title/{{::sidepanel.serie.IMDB_ID}}" ng-show="sidepanel.serie.IMDB_ID" target="_blank">IMDB</a><strong ng-show="sidepanel.serie.IMDB_ID"> | </strong>
            <a style="text-decoration: underline" ng-href="https://www.themoviedb.org/tv/{{::sidepanel.serie.TMDB_ID}}" ng-show="sidepanel.serie.TMDB_ID > 0" target="_blank">TMDB</a><strong ng-show="sidepanel.serie.TMDB_ID > 0"> | </strong>
            <a style="text-decoration: underline" ng-href="https://thetvdb.com/?tab=series&id={{::sidepanel.serie.TVDB_ID}}" ng-show="sidepanel.serie.TVDB_ID > 0" target="_blank">TVDB</a><strong ng-show="sidepanel.serie.TVDB_ID > 0"> | </strong>
            <a style="text-decoration: underline" ng-href="https://www.trakt.tv/shows/{{::sidepanel.serie.TRAKT_ID}}" ng-hide="sidepanel.serie.TRAKT_ID < 1" target="_blank">Trakt</a>
          </td>
        </tr>
        <tr>
          <th translate-once>COMMON/airs-on/hdr</th>
          <td>{{::sidepanel.translateDayOfWeek(sidepanel.serie.airs_dayofweek)}} {{::sidepanel.serie.airs_time}} {{::sidepanel.serie.timezone}}</td>
        </tr>
        <tr>
          <th translate-once>COMMON/first-aired/hdr</th>
          <td>{{::sidepanel.serie.firstaired|date:'medium'}}</td>
        </tr>
        <tr>
          <th translate-once>COMMON/genre/hdr</th>
          <td>
            <ul class="list-unstyled" ng-class="{'genres': sidepanel.serie.genre.split('|').length > 3}">
              <li ng-repeat="genre in sidepanel.serie.genre.split('|') track by $index">{{::sidepanel.translateGenre(genre)}}</li>
            </ul>
          </td>
        </tr>
        <tr>
          <th translate-once>COMMON/content-rating/hdr</th>
          <td>{{::sidepanel.serie.contentrating}}</td>
        </tr>
        <tr>
          <th translate-once>COMMON/country/hdr</th>
          <td>{{::sidepanel.serie.country}}</td>
        </tr>
        <tr>
          <th translate-once>COMMON/network/hdr</th>
          <td>{{::sidepanel.serie.network}}</td>
        </tr>
        <tr ng-show="getSetting('download.ratings')">
          <th translate-once>COMMON/rating/hdr</th>
          <td>{{::sidepanel.serie.rating}}% ({{::sidepanel.serie.ratingcount}} <span translate-once>COMMON/votes/lbl</span>)</td>
        </tr>
        <tr>
          <th translate-once>COMMON/run-time/hdr</th>
          <td>{{::sidepanel.serie.runtime}} <span translate-once>COMMON/minutes/lbl</span></td>
        </tr>
        <tr>
          <th translate-once>COMMON/status/hdr</th>
          <td>{{::sidepanel.translateStatus(sidepanel.serie.status)}}</td>
        </tr>
        <tr ng-if="sidepanel.serie.actors.length > 0">
          <th translate-once>COMMON/actors/hdr</th>
          <td>
            <ul class="actors list-unstyled">
              <li ng-repeat="actors in sidepanel.serie.actors.split('|') track by $index">{{::actors}}</li>
            </ul>
          </td>
        </tr>
        <tr style='border-top: 1px solid white'>
          <th colspan="2" style="text-align: center">
            <h3 style="margin:10px 0 10px 0" translate-once>SIDEPANEL/SERIE-DETAILS/it-would-take/hdr</h3>
            <h1 style="margin:10px 0 10px 0" ng-if="sidepanel.totalRunTime">{{sidepanel.totalRunLbl}}</h1>

            <div style="position:relative" ng-show="!sidepanel.totalRunTime">
              <h3 style="margin:5px 0 5px 0"><h3cont translate-once>SIDEPANEL/SERIE-DETAILS/calculating/hdr</h3cont>
                <loading-spinner class="small" style="margin:-2px 0 0 5px;position:absolute"></loading-spinner>
              </h3>
            </div>
            <h3 style='text-align:center;margin:10px 0 10px 0'>
              <h3cont translate-once>SIDEPANEL/SERIE-DETAILS/to-binge-watch/hdr</h3cont>{{::sidepanel.serie.name}}
            </h3>
          </th>
        </tr>
        <tr>
          <th colspan="2" style="text-align:center">
            <h3 translate-once>SIDEPANEL/SERIE-DETAILS/you-have-already-spent/hdr</h3>
            <div style="position:relative" ng-show="!sidepanel.totalRunTime">
              <h3 style="margin:5px 0 5px 0"><h3cont translate-once>SIDEPANEL/SERIE-DETAILS/calculating/hdr</h3cont>
                <loading-spinner class="small" style="margin:-2px 0 0 5px;position:absolute"></loading-spinner>
              </h3>
            </div>
            <h1 style="margin:10px 0 10px 0" ng-if="sidepanel.totalWatchedTime">{{sidepanel.totalWatchedLbl}}</h1>
            <h3 translate-once>SIDEPANEL/SERIE-DETAILS/which-is/hdr</h3>
              <div style="position:relative" ng-show="!sidepanel.totalRunTime">
                <h3 style="margin:5px 0 5px 0"><h3cont translate-once>SIDEPANEL/SERIE-DETAILS/calculating/hdr</h3cont>
                <loading-spinner class="small" style="margin:-2px 0 0 5px;position:absolute"></loading-spinner>
              </h3>
            </div>
            <h1 style="margin:10px 0 10px 0" ng-if="sidepanel.totalWatchedTime">{{sidepanel.totalWatchedPercent}} %</h1>
          </th>

        </tr>
      </tbody>
    </table>
</div>
